<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成表格</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
    <thead>
    <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody id="j_tbData">

    </tbody>
</table>
</body>

</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    /**
     *  a)	模拟从后端拿到的数据
        b)	循环data数组，操作每一个元素
        c)	给获取数据按钮设置一个点击事件
        d)	创建<tr>标签元素
        e)	每一个元素又是一个对象,所以对象有多少个键值对就有多少个<td>
        f)	设置内容，生成表格结构
     */
    $(function(){
        var data = [{
            name: "传智播客",
            url:"http://www.itcast.cn",
            type:'IT最强培训机构',
        },{
            name:'黑马程序员',
            url:'http://www.itheima.com',
            type:'大学生IT培训机构',
        },{
            name:'传智前端学院',
            url:'http://web.itcast.cn',
            type:'前端的黄埔军校',
        }];

        $("#j_btnGetData").click(function(){
            var list=[];
            for(var i=0;i<data.length;i++){
                list.push("<tr>");//push在数组中添加新元素
                for(var key in data[i]){
                    list.push('<td>');
                    list.push(data[i][key]);
                    list.push('</td>');
                }
                list.push('</tr>');
            }
            $('#j_tbData').html(list.join(""));
            //join 将数组元素转换为字符串
        });
    });
</script>